<!DOCTYPE html> 
<html>
	<head>
		<title>jPyKondo</title>
		<link rel="stylesheet" href="lib/jQuery/jquery.mobile-1.0a2.min.css" />
		<script src="lib/jQuery/jquery-1.4.4.min.js"></script>
		<script src="lib/jQuery/jquery.mobile-1.0a2.min.js"></script>
		<script src="jPyKondo.js"></script>		
		<script type="text/javascript">
			$(function(){
				loop_status();
				loop_img();
				initMoves();
				loadMotions();
			});
		</script>
		<style>
		
		</style>
	</head>
	<body>
		<div data-role="page" data-theme="e">
			<div data-role="header" data-theme="e" data-position="fixed">
				<h1>jPyKondo</h1>
			</div>
			<div data-role="content" data-theme="e">
				<div>
					<span id="status">
						Cnx :<span id="ki_connected"></span></br>
						Bat :<span id="ki_battery_level"></span>
					</span>
				</div>
				<a href="#moves"  data-role="button" data-icon="gear" data-transition="pop">moves</a>
				<a href="#motion_dialog"  data-role="button" data-icon="gear" data-transition="pop">motions</a>
				<div class="ui-grid-a">
					<div class="ui-block-a"><strong>
						<img id="pic_capture" border="1" style="width:320px;height:240px;" src="" />
					</div>
					<div class="ui-block-b">
						<img id="pic_motion" border="1" style="width:320px;height:240px;" src="" />
					</div>
				</div><!-- /grid-a -->
			</div>
		</div>
		<div id="moves" data-role="page" data-theme="e">
			<div data-role="header" data-theme="e" data-position="fixed">
				<h1>Moves</h1>
			</div>
			<div data-role="content" data-theme="e">
				<fieldset class="ui-grid-b">
					<div class="ui-block-a"><a id="bt_move_turnleft" 	href="#" data-role="button" data-icon="back"		data-iconpos="top"	></a>		</div>
					<div class="ui-block-b"><a id="bt_move_forward" 	href="#" data-role="button" data-icon="arrow-u"		data-iconpos="top"	></a>		</div>
					<div class="ui-block-c"><a id="bt_move_turnright" 	href="#" data-role="button" data-icon="forward"		data-iconpos="top"	></a>		</div>

					<div class="ui-block-a"><a id="bt_move_left" 		href="#" data-role="button" data-icon="arrow-l"		data-iconpos="top"	></a>		</div>
					<div class="ui-block-b"><a id="bt_move_stop" 		href="#" data-role="button" data-icon="delete"		data-iconpos="top"	></a>		</div>
					<div class="ui-block-c"><a id="bt_move_right" 		href="#" data-role="button" data-icon="arrow-r"		data-iconpos="top"	></a>		</div>

					<div class="ui-block-a"><a id="bt_move_standback"	href="#" data-role="button" data-icon="arrow-u"		data-iconpos="left"	>back</a>	</div>
					<div class="ui-block-b"><a id="bt_move_backward" 	href="#" data-role="button" data-icon="arrow-d"		data-iconpos="top"	></a>		</div>
					<div class="ui-block-c"><a id="bt_move_standfront" 	href="#" data-role="button" data-icon="arrow-u"		data-iconpos="right">front</a>	</div>
					
					<div class="ui-block-a">&nbsp;</div>
					<div class="ui-block-c"><a id="bt_move_head" 		href="#" data-role="button" data-icon="grid"		data-iconpos="top"	>head</a></div>
					<div class="ui-block-c">&nbsp;</div>
				</fieldset>
			</div>
		</div>
		<div id="motion_dialog" data-role="page" data-theme="e">
			<div data-role="header" data-theme="e"data-position="fixed">
				<h1>Motions</h1>
			</div>
			<div data-role="content" data-theme="e">
				<ul id="ki_list_motions" data-theme="e" data-role="listview" data-inset="true">
				</ul>
			</div>
		</div>
				
	</body>
</html>
